<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" href="../../static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/frame/static/css/style.css">
    <link rel="icon" href="../../static/frame/static/image/code.png">
</head>
<body class="body">


<div class="layui-row layui-col-space10 my-index-main">
    <ul class="layui-timeline" id="LAY_demo1"></ul>
</div>


<script src="../../static/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../static/frame/layui/layui.js"></script>
<script type="text/javascript" src="../../static/js/index.js"></script>
<script type="text/javascript" src="../../static/frame/echarts/echarts.min.js"></script>
<script type="text/javascript">
    var adlist = '';

    layui.use(['flow', 'element', 'layer', 'vip_tab'], function () {
        // 打开选项卡
        $('.my-nav-btn').on('click', function () {
            if ($(this).attr('data-href')) {
                vipTab.add($(this), '<i class="layui-icon">' + $(this).find("button").html() + '</i>' + $(this).find('p:last-child').html(), $(this).attr('data-href'));
            }
        });
        var flow = layui.flow;
        //var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。

        flow.load({
            elem: '#LAY_demo1' //指定列表容器
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('../ajax.php?mod=sitelog&page=' + page, function (res) {
                    //假设你的列表返回在data集合中
                    //alert(res);
                    res = JSON.parse(res);
                    layui.each(res.data, function (index, item) {

                        lis.push('  <li class="layui-timeline-item">\n' +
                            '    <i class="layui-icon layui-timeline-axis" style="color: ' + item.color + ';font-size: 26px">' + item.icon + '</i>\n' +
                            '    <div class="layui-timeline-content layui-text">\n' +
                            '      <h3 class="layui-timeline-title">' + item.time + '</h3>\n' +
                            '      <p>' + item.content + '</p>\n' +
                            '    </div>\n' +
                            '  </li>');

                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                });
            }
        });

    });


</script>
</body>
</html>